// * {
//      margin: 0;
//      padding: 0;
//      // 内减模式 
//      box-sizing: border-box;
// }

// ul {
//      list-style: none;
// }

// img {
//      // 宽度由父盒子来控制 
//      width: 100%;
//      // 去掉图片默认3px的间隙 
//      display: block;
// }

// a {
//      text-decoration: none;
//      // a标签的字体颜色 默认 是蓝色
//      // a标签的字体颜色继承父元素的字体颜色 - div一样 
//      // color: inherit;
// }

// // 清除浮动 。。。。。 
// // 暂时不用  mui提供有了！！！

// // 



html,
body {
     height: 100%;
}

body {
     padding-top: 45px;
     padding-bottom: 50px;
}

.pyg_view {

     height: 100%;
     overflow: scroll;
     // 高度 = 屏幕的高度 - 头部的高度 - 尾部的高度！！
     // html 和body标签的高度 = 100%   pyg_view 高度 =100%
     // 在body 添加属性 padding-top:头部标签的高度 padding-bottom :尾部的高度
     // 里面的内容 肯定是超过 pyg_view标签的高度 否则出现滚动条
}

.pyg_header {
     width: 100%;
     /* 
     块级元素加上 固定或者绝对定位之后 宽度？？
     默认 100% 
     变成了由内容来撑开！！！！

      */
     height: 45px;
     position: fixed;
     top: 0;
     left: 0;
     background-color: #fff;
     padding: 5px;
}

.pyg_footer {
     width: 100%;
     height: 50px;
     position: fixed;
     bottom: 0;
     left: 0;
     display: flex;
     border-top: 1px solid #ccc;
     background-color: #fff;

     a {
          flex: 1;
          text-align: center;
          padding-top: 4px;
          color: #000;

          span {
               font-size: 20px;
          }

          div {
               font-size: 13px;
          }
     }
}


/* 
1 效果：
     1 头部 和尾部 
          固定定位 写死 宽100% 和 高度 50px top:0 bottom:0
     2 内容标签 pyg_view
          height: 100% 
          overflow:scroll;
     3 html和body必须要加上 100% 
          body padding-top:头部标签的高度
          body padding-bottom:尾部标签的高度
2 效果 分类页面
     1 父容器的宽度 100%  = 屏幕的宽度
          padding-left :80px
     2 left 宽度 80px 固定固定
          绝对定位 紧贴在左侧 
     3 right 宽度 = 屏幕的宽度 - left 的宽度
          什么都不用做  width=100% 
 */

.loadding {
     //  实现遮罩层
     &::before {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #fff;
          z-index: 1000;
          content: "";
          opacity: .8;
     }
     // 样式的图标
     &::after {
          display: inline-block;
          font: normal normal normal 14px/1 FontAwesome;
          font-size: inherit;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          animation: fa-spin 2s infinite linear;
          content: "\f021";
          position: fixed;
          top: 30%;
          left: 50%;
          // transform: translateX(-50%);
          margin-left: -43px;
          z-index: 1001;
          font-size: 100px;
          color: red;
     }
}